<template>
  <div class="approval-container">
    <div class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <label>请选择姓名：</label>
          <input type="text" v-model="filters.name" placeholder="输入姓名">
        </div>
        <div class="filter-item">
          <label>所属单位：</label>
          <input type="text" v-model="filters.department" placeholder="输入单位">
        </div>
        <div class="filter-item">
          <label>不同层级名：</label>
          <input type="text" v-model="filters.level" placeholder="输入层级">
        </div>
      </div>
    </div>

    <table class="data-table">
      <thead>
      <tr>
        <th>序号</th>
        <th>报名人</th>
        <th>工号</th>
        <th>盘考批次</th>
        <th>身份证号校区</th>
        <th>一审人员</th>
        <th>一审结果</th>
        <th>二审人员</th>
        <th>二审结果</th>
        <th>上传材料</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in filteredRejectedList" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.workId }}</td>
        <td>{{ item.batch }}</td>
        <td>{{ item.campus }}</td>
        <td>{{ item.firstReviewer }}</td>
        <td>
          <span :class="getResultClass(item.firstResult)">{{ item.firstResult }}</span>
        </td>
        <td>{{ item.secondReviewer }}</td>
        <td>
          <span :class="getResultClass(item.secondResult)">{{ item.secondResult }}</span>
        </td>
        <td>
          <button class="preview-btn" @click="previewMaterials(item)">预览</button>
        </td>
        <td>
          <router-link :to="`/dashboard3/approval/rejected/${item.id}`" class="detail-btn">
            查看详情
          </router-link>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Applicant {
  id: number
  name: string
  workId: string
  batch: string
  campus: string
  department: string
  level: string
  materials: string
  firstReviewer: string
  firstResult: string
  secondReviewer: string
  secondResult: string
}

const filters = ref({
  name: '',
  department: '',
  level: ''
})

const rejectedList = ref<Applicant[]>([
  {
    id: 1,
    name: '赵刚',
    workId: '20001',
    batch: '2023年4月2023盘考报名',
    campus: '南湖校区',
    department: '艺术学院',
    level: '研工办主任',
    materials: '',
    firstReviewer: '王主任',
    firstResult: '未通过',
    secondReviewer: '李科长',
    secondResult: '未通过'
  },
  {
    id: 2,
    name: '刘洋',
    workId: '20002',
    batch: '2023年4月2023盘考报名',
    campus: '余家头校区',
    department: '医学院',
    level: '研工办副主任',
    materials: '',
    firstReviewer: '张主任',
    firstResult: '未通过',
    secondReviewer: '李科长',
    secondResult: '未通过'
  }
])

const filteredRejectedList = computed(() => {
  return rejectedList.value.filter(item => {
    return (filters.value.name === '' || item.name.includes(filters.value.name)) &&
        (filters.value.department === '' || item.department.includes(filters.value.department)) &&
        (filters.value.level === '' || item.level.includes(filters.value.level))
  })
})

const previewMaterials = (item: Applicant) => {
  alert(`预览 ${item.name} 的材料`)
}

const viewDetail = (item: Applicant) => {
  alert(`查看 ${item.name} 的详细信息`)
}

const getResultClass = (result: string) => {
  return result === '通过' ? 'result-pass' : 'result-fail'
}
</script>

<style scoped>
/* 原有样式保持不变 */
.approval-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.filter-section {
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-item label {
  margin-right: 8px;
  font-size: 14px;
  color: #1a2b4b;
}

.filter-item input {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  width: 150px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

.data-table th,
.data-table td {
  border: 1px solid #e2e8f0;
  padding: 12px 15px;
  text-align: left;
}

.data-table th {
  background-color: #f0f2f5;
  color: #1a2b4b;
  font-weight: 600;
}

.data-table tbody tr:hover {
  background-color: #f8fafc;
}

.preview-btn,
.detail-btn {
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.preview-btn {
  background-color: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.detail-btn {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

/* 审核结果样式 */
.result-pass {
  color: #52c41a;
  font-weight: bold;
}

.result-fail {
  color: #f5222d;
  font-weight: bold;
}
</style>